<template>

	<view>
		<u-sticky bgColor="#fff" style='top:0'>
			<u-tabs :current="tabsIndex" @click="click" style="background-color: #FFFFFF;padding-bottom:10rpx"
				:list="list4" lineWidth="30" lineColor="#8438FC" :activeStyle="{
								color: '#8438FC',
								fontWeight: 'bold',
								transform: 'scale(1.05)'
							}" :inactiveStyle="{
								color: '#606266',
								transform: 'scale(1)'
							}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;padding-bottom:5rpx">
			</u-tabs>
		</u-sticky>

		<view v-for="(item,index) in dataList" :key="index">
			<view class="item" @click="onClick($event,item)">
				<view v-for="(item1,index1) in item.services" :key="index1">
					<view class="item1 flex-row-center">
						<image class="technician_avatar" :src="item.technician_avatar" mode=""></image>
						<view class="flex1 flex-column-space-between" style="margin-right: 20rpx;">
							<view class="flex-row-space-between">
								<view class="name">
									{{item1.name}}
								</view>
								<view v-if='!index1' class="status">
									{{item.status_text}}
								</view>
							</view>
							<view class="flex-row-space-between" style="margin-top: ;">
								<view class="technician_nickname">
									服务达人:{{item.technician_nickname}}
								</view>
								<view v-if='!index1' class="number">
									x{{item1.number}}
								</view>
							</view>
							<view class="price">
								￥{{item1.price}}
							</view>
							<view class="appointment_time">
								服务时间: {{item.appointment_time}}
							</view>
						</view>
					</view>
				</view>
				<view class="should_pay_money">
					合计(￥):{{item.should_pay_money}}
				</view>
				<view class="line">

				</view>
				<view class="flex-row-space-between" style="padding: 20rpx 0rpx; ">
					<view class="bootomButton flex-row-center">
						订单详情
					</view>
					<view class="flex-row-flex-end">
						<view id='hide' v-if="item.status_text == '待付款'" class="bootomButton1 flex-row-center">
							取消订单
						</view>
						<view id="pay" v-if="item.status_text == '待付款'" class="bootomButton1 flex-row-center">
							立即支付
						</view>
						<view id='toushu' v-if="item.status_text != '待付款'" class="bootomButton1 flex-row-center">
							投诉
						</view>
						<view v-if="item.status_text == '已完成'||item.status_text == '已取消'" @click.stop="shanc(item)"
							class="bootomButton1 flex-row-center">
							删除订单
						</view>
						<view v-if="item.status_text == '已完成'" @click.stop="zaici(item)"
							class="bootomButton1 flex-row-center">
							再次下单
						</view>
						<!-- 	<view v-if="item.status_text == '已完成'" class="bootomButton1 flex-row-center">
							评价订单
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<Tabbar :value='3' />
	</view>
	</view>
</template>

<script>
	import tmSkeleton from '@/tm-vuetify/components/tm-skeleton/tm-skeleton.vue'
	// 后台没有数据就引入xer.vue  ，后台接口给出数据就引入index.vue
	// import zNo from '@/components/z-no/index.vue'
	import zNo from '@/components/z-no/xer.vue'
	import qrcode from 'qrcode'
	export default {
		components: {
			tmSkeleton,
			zNo
		},
		data() {
			//0待付款；1待确认；2待服务；3进行中;4完成；5评价；6取消订单
			return {
				list4: [{
					name: '全部',
					status: 99
				}, {
					name: '待付款',
					status: 0,
					// badge: {
					// 	isDot: true
					// }
				}, {
					name: '进行中',
					status: 1,

				}, {
					name: '已完成',
					status: 2,
				}, {
					name: '已取消',
					status: -1,
				}],
				loading: true,
				tabsIndex: 0,
				dataList: [],
				total: null,
				qrCode: '',
				show: false,
			};
		},
		onLoad() {
			let active = uni.getStorageSync('tabsIndex');
			if (active) {
				this.tabsIndex = Number(active);
				uni.removeStorageSync('tabsIndex')
			}
			this.page = 1;
			this.dataList = [];
			this.total = null;
			uni.$u.sleep(1000).then(() => {
				this.init();
			})

		},
		onPullDownRefresh() {
			let _self = this
			console.log('refresh');
			setTimeout(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
				this.page = 1;
				this.dataList = [];
				this.total = null;
				this.init();
			}, 1000);
		},
		onReachBottom() {
			if (this.dataList.length === this.total) {
				return;
			}
			this.page++;
			this.init();
		},
		methods: {
			shanc(item) {
				this.$http.post('api/order/delete', {
					order_id: item.id
				}).then(res => {

					this.page = 1;
					this.dataList = [];
					this.init();
				})
				// uni.showToast({
				// 	title:'????????努力研发中...',
				// 	icon:'none'
				// })


			},
			zaici(item) {
				uni.navigateTo({
					url: '/bundle/pages/techDeil/techDeil?id=' + item.technician_id
				})
			},
			countdown(item) {
				item._interval = setInterval(() => {
					if (item.countTime == 0) {
						item.toLiveBtn = '已结束'
						clearInterval(item._interval);
					} else if (item.countTime < 0) {
						item.toLiveBtn = '已结束'
						clearInterval(item._interval);
					} else {
						item.countTime--;
						let day = parseInt(item.countTime / 60 / 60 / 24)
						let hr = parseInt(item.countTime / 60 / 60 % 24)
						let min = parseInt((item.countTime / 60) % 60);
						let sec = parseInt(item.countTime % 60);

						day = day > 9 ? day : '0' + day
						hr = hr > 9 ? hr : '0' + hr
						min = min > 9 ? min : "0" + min;
						sec = sec > 9 ? sec : "0" + sec;
						item.toLiveBtn =
							`${day!=0?day+'天':''}${day?hr+'时': hr!=0?hr+'时':''}${hr?min+'分': min!=0?min+'分':''}${min?sec+'秒': sec!=0?sec+'秒':''}`;
						if (item.countTime == 10 * 60) {
							// #ifdef H5
							const innerAudioContext = uni.createInnerAudioContext();
							innerAudioContext.autoplay = true;
							innerAudioContext.src = '/static/mp3/y781.wav';
							innerAudioContext.onPlay();
							// #endif
							// #ifndef H5
							const bgAudioManager = uni.getBackgroundAudioManager();
							bgAudioManager.src = '/static/mp3/y781.wav';
							// #endif
						}
					}
					this.$forceUpdate()
				}, 1000)
			},
			scan(item) {
				this.qrCode = ''
				qrcode.toDataURL(item.order_sn).then((res) => {
					this.qrCode = res;
					this.show = true
				});
			},
			init() {
				console.log(this.list4[this.tabsIndex].status)
				this.$http.post('api/order/list', {
					status: this.list4[this.tabsIndex].status,
					page: this.page,
					limit: 10
				}).then(res => {
					for (var i = 0; i < res.length; i++) {
						this.dataList.push(res[i]);
					}

					/* this.dataList.forEach((item=>{
						item.countTime=item.cutdown_time
						this.countdown(item)
					}))
					this.total = total; */
					this.loading = false
				})
			},
			click(e) {
				let {
					index
				} = e;
				this.tabsIndex = index;
				this.page = 1;
				this.dataList = [];
				this.init();
			},
			onClick(e, item) {
				let id = e.target.id;
				if (id === 'hide') {
					this.hide(item);
					return
				}
				if (id === 'pay') {

				}
				console.log(item.order_sn)
				if (id === 'toushu') {
					uni.navigateTo({
						url: '/bundle/pages/complaint/complaint?order_id=' + item.order_sn
					})
					return
				}
				if (id === 'comment') {
					uni.navigateTo({
						url: '/bundle/pages/orderComment/orderComment?order_sn=' + item.order_sn
					})
					return
				}
				uni.navigateTo({
					url: '/bundle/pages/order_details/order_details?order_sn=' + item.order_sn
				})
			},
			hide(item) {
				uni.showModal({
					content: '是否确认取消订单？',
					success: (res) => {
						console.log(res)
						if (res.confirm) {
							this.$http.post('api/cancel/order', {
								order_sn: item.order_sn
							}).then(res => {


								// this.$http.post('api/order/confirmCancel',{
								// 	order_sn: item.order_sn
								// }).then(res =>{

								// 	uni.showToast({
								// 		icon:'none',
								// 		title:'取消成功'
								// 	});

								// })

								// this.tabsIndex = 5;
								this.page = 1;
								this.dataList = [];
								this.init();
							})
						}
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		background-color: #F6F8FA;
		padding-bottom: 120rpx;
	}

	.item {
		margin: 15rpx 30rpx;

		background: #FFFFFF;
		border-radius: 10rpx;
	}

	.item1 {
		padding-top: 16rpx;
	}

	.technician_avatar {
		margin: 0 16rpx;
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
		opacity: 1;
	}

	.name {
		font-size: 34rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.status {
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: $init;
	}

	.technician_nickname {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.number {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.price {
		margin-top: 40rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ED0606;
	}

	.appointment_time {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.should_pay_money {
		margin: 16rpx 16rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #ED0606;
	}

	.line {
		margin: 16rpx 16rpx;
		margin-bottom: 0;
		height: 2rpx;
		background-color: #E6E6E6;
	}

	.bootomButton {
		margin-left: 18rpx;
		width: 154rpx;
		height: 60rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 2rpx solid #333333;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: #333333;
	}

	.bootomButton1 {
		margin-right: 18rpx;
		width: 154rpx;
		height: 60rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		border: 2rpx solid $init;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		// font-weight: 500;
		color: $init;
	}
</style>